<template>
  <div>
    <el-dialog
      v-model="showDialog"
      @close="closeDialog"
      :title="btnParams._id ? '修改按钮' : '添加按钮'"
      width="500"
      center
      @open="openDialog"
    >
      <el-form
        label-width="120px"
        ref="formRef"
        :model="btnParams"
        :rules="rules"
      >
        <el-form-item label="按钮名称:" prop="ButtonName">
          <el-input
            placeholder="请输入按钮名称"
            v-model="btnParams.ButtonName"
          ></el-input>
        </el-form-item>
        <el-form-item label="按钮值:" prop="ButtonValue">
          <el-input
            placeholder="请输入按钮值"
            v-model="btnParams.ButtonValue"
          ></el-input>
        </el-form-item>
        <el-form-item label="按钮描述:" prop="ButtonContent">
          <el-input
            placeholder="请输入按钮描述"
            v-model="btnParams.ButtonContent"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="AddOrUpdateBtn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
defineOptions({
  name: "AddButton",
});
import { ref, watch, reactive } from "vue";
import { AddOrUpdateBtnAPI, getBtnDetailAPI } from "@/api/btn";
import { ElMessage } from "element-plus";
const props = defineProps(["modelValue", "btnid"]);
const emits = defineEmits(["update:modelValue", "getBtnList", "update:btnid"]);
let showDialog = ref(props.modelValue);
let btnParams = reactive({
  ButtonName: "",
  ButtonValue: "",
  ButtonContent: "",
});
let formRef = ref(null);
let rules = reactive({
  ButtonName: [
    { required: true, message: "请输入按钮名称", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5A-Za-z0-9]+$/,
      message: "不能输入特殊符号",
      trigger: "blur",
    },
  ],
  ButtonValue: [
    { required: true, message: "请输入按钮值", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5A-Za-z0-9]+$/,
      message: "不能输入特殊符号",
      trigger: "blur",
    },
  ],
  ButtonContent: [
    { required: true, message: "请输入按钮描述", trigger: "blur" },

    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5A-Za-z0-9]+$/,
      message: "不能输入特殊符号",
      trigger: "blur",
    },
  ],
});
watch(
  () => props.modelValue,
  (newValue) => {
    showDialog.value = newValue;
  }
);
watch(
  () => props.btnid,
  (newValue) => {
    btnParams._id = newValue;
  }
);
const closeDialog = () => {
  showDialog.value = false;
  emits("update:modelValue", false);
  btnParams._id = "";
  emits("update:btnid", "");
};
//获取详情
const getBtnDetail = async () => {
  if (btnParams._id) {
    let result = await getBtnDetailAPI(btnParams._id);
    if (result.code == 200) {
      Object.assign(btnParams, result.data);
    }
  }
};
//添加或者修改
const AddOrUpdateBtn = async () => {
  await formRef.value.validate();
  let result = await AddOrUpdateBtnAPI(btnParams);
  if (result.code == 200) {
    ElMessage.success(btnParams._id ? "修改成功" : "添加成功");
    emits("getBtnList");
    closeDialog();
  }
};
const openDialog = () => {
  formRef.value.resetFields();
  getBtnDetail();
};
</script>

<style lang="less" scoped></style>
